

<template>
  <div class="bank-container">
    <div class="search" v-if="isShowSearch">
      <span>题库名称</span>
      <el-input v-model="bankName" placeholder="请输入题库名称"/>
      <el-button :icon="Search" class="el-button__primary" type="primary" @click="initPageBank">查询</el-button>
      <el-button :icon="Refresh" class="el-button__default" @click="refresh()">重置</el-button>
    </div>
    <!--  操作按钮-->
    <div class="operation">
      <div class="float_left">
        <el-button :icon="Search" class="el-button__primary" type="primary" @click="handleAdd()">新增</el-button>
        <el-button :icon="Refresh" class="el-button__plain" @click="refresh">刷新缓存</el-button>
        <el-button :icon="Delete" class="el-button__plain__disabled" disabled>删除</el-button>
      </div>
      <div class="float_right">
        <el-tooltip :content="isShowSearch?'隐藏搜索':'显示搜索'" placement="top" >
          <el-button :icon="Search" circle @click="showSearch()"/>
        </el-tooltip>
        <el-tooltip content="刷新" placement="top">
          <el-button :icon="Refresh" circle  @click="refresh"/>
        </el-tooltip>
      </div>
    </div>
    <!--  租户信息card-->
    <div class="bank-info__card">
      <el-row :gutter="30"
              v-loading="loading">
        <!--      循环bankList创建el-card-->
        <el-col :lg="6" :md="6" :sm="12" :xs="24" v-for="item in bankList">
          <el-card :key="item.id" class="bank-info__card__item">
            <div class="bank-info__card__item__title">
              <span>{{ item.bankName }}</span>
            </div>
            <div class="bank-info__card__item__other">
              <div class="bank-info__card__item__other__item">
                <span>题库所属： </span>
                <span>{{ item.ownerName }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>题库描述： </span>
                <span>{{ item.description }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>创建时间： </span>
                <span>{{item.createTime}}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>公开状态： </span>
                <span>{{ item.isPublic===1?"公开":"非公开" }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>公开范围： </span>
                <span>{{item.publicScope===2?"完全公开":item.publicScope===1?"校内公开":"未公开"}}</span>
              </div>
              <!--              操作-->
              <div class="bank-info__card__item__operator">
                <el-button link :icon="Edit" @click="editBank(item.id)"> 修改</el-button>
                <el-button link  @click="importQuestion(item.id)">
                  <svg-icon icon-class="cloud-upload"/>
                   导入</el-button>
                <el-button link :icon="Delete"
                           @click="removeBank(item.id)"> 删除
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  分页按钮-->
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model::current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12,24,48,96]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <add-bank @refresh="refresh"/>
    <upload-question @refresh="refresh"/>
  </div>

</template>
<script setup lang="ts">
import {Delete, Edit, Refresh, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {deleteBank, pageBank} from "@/api/question/bank.ts";
import AddBank from "@/components/question/addBank.vue";
import {bankStore} from "@/stores/question/bankStore.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {questionStore} from "@/stores/question/questionStore.ts";
import UploadQuestion from "@/components/question/uploadQuestion.vue";
const loading = ref(false)
const bankList = ref([{}])
const isShowSearch = ref(true)
const currentPage = ref(1)
const total = ref(0)
const pageSize = ref(12)
const bankName=ref("")
const store=bankStore()
const qStore= questionStore()
onMounted(()=>{
  initPageBank()
})

const initPageBank=async () => {
  loading.value=true
  const res = await pageBank({page: currentPage.value, pageSize: pageSize.value, bankName: bankName.value})
  bankList.value = res.data.records
  total.value = res.data.total
  loading.value=false
}

const showSearch=()=>{
  isShowSearch.value=!isShowSearch.value
  console.log(isShowSearch.value)
}
const refresh=()=>{
  bankName.value=''
  initPageBank()
}
const handleAdd=()=>{
  store.setBackInsertOpen(true)
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  initPageBank()
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  initPageBank()
}

const importQuestion=(id)=>{
  qStore.setQuestionUploadOpen(true)
  qStore.setBankId(id)
}
/**
 * 删除租户
 * @param id
 */

const removeBank = async (id: number) => {
  ElMessageBox.confirm('确定删除该题库吗?', '确认删除', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  }).then(async () => {
    const res = await deleteBank(id)
    if (!res.data) {
      ElMessage({
        type: 'error',
        message: '删除题库失败',
      })
    }else {
      ElMessage({
        type: 'success',
        message: '删除题库成功',
      })
    }
  }).catch(() => {
  }).finally(() => {
    refresh()
  })
}
const editBank=(id)=>{
  store.setBackInsertOpen(true)
  store.setBankId(id)
}

</script>
<style scoped>
.bank-container {
  border: 1px solid var(--el-menu-border-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.bank-info__card {
  min-height: 70%;
  display: flex;
  overflow: auto;
  margin: 0 60px;
  .el-row {
    width: 100%!important;
    height: 100%!important;
  }

  .bank-info__card__item {
    border-radius: 10px;
    margin: 20px;
    border: rgb(46, 92, 246) 1px solid;
    //background-color: rgb(243, 244, 246,0.2);
    box-shadow: 1px 1px 10px 1px rgb(46, 92, 246, 0.2);
    background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 模糊效果 */
  }
}

.pagination {
  width: 100%;
  height: 10%;
  margin: 20px;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}
.operation {
  width: 100%;
  height: 10%;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  display: flex;

  .float_left {
    align-items: center;
    display: flex;
  }

  .float_right {
    align-items: center;
    display: flex;
    margin-right: 20px;
  }
}
.search {
  span {
    line-height: 32px;
  }

  display: flex;
  font-size: 12px;

  .el-input {
    width: 160px;
    height: 32px;
    font-size: 12px;
    margin: 0 8px;
  }

}
.bank-info__card__item__title{
  text-align: center;
  color: rgb(46, 92, 246);
  font-size: 14px;
  margin-bottom: 10px;
}
.bank-info__card__item__other {
  font-size: 12px;

  .bank-info__card__item__other__item {
    margin: 5px 0;
  }
}

.bank-info__card__item__operator {
  font-size: 12px;
  display: flex;
  justify-content: right;

  .el-button {
    color: rgb(46, 92, 246);
    font-size: 12px;
  }
}
</style>